import { useRef, useEffect, useState, type RefObject } from 'react';

const useElementPosition = (): [{ height: number }, RefObject<HTMLDivElement>] => {
  const [position, setPosition] = useState({ height: 0 });
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleResize = () => {
      if (elementRef.current) {
        const rect = elementRef.current.getBoundingClientRect();
        setPosition({ height: rect.height });
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return [position, elementRef];
};

export default useElementPosition;
